<template>
    <div>
        <!--        <myNavbar :title="title"></myNavbar>-->
        <div style="position: fixed;top:0">
            <div :style="{height:statusBarHeight + 'px'}"></div>
            <div @click="backClick" class="return">
                <div class="returnContent">
                    <text class="iconback">&#xe659;</text>
                </div>
            </div>
        </div>
        <list :style="{backgroundColor:backgroundColor}">
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">{{refreshTitle}}</text>
            </refresh>
            <cell>
                <div v-for="item in componentsList" :key="item.id" v-if="componentsList.length>0">
                    <component :key="times" :is="item.name" :content="item" :pageNum='pageNum'></component>
                </div>
            </cell>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">加载中...</text>
            </loading>
        </list>
        <div>
            <div id='anchor1'>
                <div style="padding-top:300px" v-if="componentsList.length==0">
                    <noData></noData>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import { list as designerList } from "../../../api/designer.js";
import { find } from "../../../api/wxPage";
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
import acrossAd from "../component/acrossAd/acrossAd.vue";
import category_ten from "../component/category/category_ten.vue";
import category_eight from "../component/category/category_eight.vue";
import category_six from "../component/category/category_six.vue";
import category_five from "../component/category/category_five.vue";
import category_four from "../component/category/category_four.vue";
import category_three from "../component/category/category_three.vue";
import acrossService from "../component/acrossService/acrossService.vue";
import hotGoods from "../component/hotGoods/hotGoods.vue";
import xcxAd from "../component/xcxAd/xcxAd.vue";
import swipersChange from "../component/swipers/swipersChange.vue";
import swipers from "../component/swipers/swipers.vue";
import brand from "../component/brand/brand.vue";
import adBanner from "../component/adBanner/adBanner.vue";
import noData from "../../../components/noData/noData.vue";
import products from "../component/products/products.vue";
import productRow from "../component/products/productRow.vue";
import swipersCity from "../component/swipers/swipersCity.vue";
import groupCard from "../component/groupProduct/groupCard";
import groupCardList from "../component/groupList/index";
import groupPurchaseWelfarefrom from "../component/groupList/groupPurchaseWelfarefrom";
import wxHeader from "../component/wxHeader/index";
import swipersTranslate from "../component/swipers/swipersTranslate";
import nearbyShops from "../component/nearbyShops/nearbyShops";
import transferActivities from "../component/transferActivities/transferActivities";
import shootingActivity from "../component/transferActivities/shootingActivity";
import transferFiltering from "../component/transferActivities/transferFiltering";
import spikeGroup from "../component/spike/group.vue";
import publicNavigation from "../component/publicNavigation/index.vue"
export default {
    name: "",
    data() {
        return {
            loadinging: false,
            refreshing: false,
            pageNum: 1,
            length: "",
            title: "",
            tageId: "",
            componentsList: [],
            hiddenNav: true,
            backgroundColor: "rgb(248,248,248)",
            statusBarHeight: eeui.getStatusBarHeightPx(),
            times: null,
            refreshTitle: "释放刷新页面...",
        };
    },
    pageResume: function () {
        let _this = this;
        storage.getItem("amapType", function (e) {
            if (
                e.result == "success" &&
                e.data != undefined &&
                e.data != "undefined"
            ) {
                _this.componentsList = [];
                _this.length = [];
                _this.loadPage(app.config.params);
                _this.getPageInfo(app.config.params);
                storage.removeItem("amapType");
            }
        });
    },
    created() {
        // 在实例创建完成后被立即调用
        this.initIconFont();
        this.loadPage(app.config.params);
        this.getPageInfo(app.config.params);
    },
    methods: {
        onpullingdown(event) {
            this.refreshTitle = "释放刷新页面...";
        },
        onrefresh(event) {
            this.refreshing = true;
            this.refreshTitle = "加载中...";
            setTimeout(() => {
                this.pageNum = 1;
                this.refreshing = false;
            }, 1000);
        },
        onloading(event) {
            this.loadinging = true;
            setTimeout(() => {
                this.loadinging = false;
                this.pageNum += 1;
            }, 1000);
        },
        getPageInfo(id) {
            find(id).then((res) => {
                this.title = res.data.wxPage.name;

                if (
                    res.data.wxPage.hasOwnProperty("backgroundColor") &&
                    !this.isNull(res.data.wxPage.backgroundColor)
                ) {
                    this.backgroundColor = res.data.wxPage.backgroundColor;
                }
            });
        },
        loadPage(e) {
            designerList({
                mchId: this.getGlobalData().mchId,
                pageId: e,
            }).then((res) => {
                console.info("55555555555522223336636363636");
                console.info(res);
                this.componentsList = res.data;
                this.length = res.data.length;
                this.times = new Date().getTime();
            });
        },
        backClick() {
            eeui.closePage();
        },
    },
    components: {
        wxHeader,
        groupCardList,
        adBanner,
        acrossAd,
        acrossService,
        hotGoods,
        category_ten,
        category_eight,
        category_six,
        category_five,
        category_three,
        category_four,
        xcxAd,
        swipersChange,
        swipers,
        noData,
        products,
        brand,
        productRow,
        myNavbar,
        swipersCity,
        groupCard,
        swipersTranslate,
        groupPurchaseWelfarefrom,
        nearbyShops,
        transferActivities,
        shootingActivity,
        transferFiltering,
        spikeGroup,
        publicNavigation
    },
};
</script>

<style scoped>
.navbar {
    width: 750px;
    height: 100px;
}

.refresh {
    /*margin-top: 20px;*/
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.loading {
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 30px;
}

.indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
}

.return {
    height: 100px;
    width: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.returnContent {
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*position: absolute;*/
    /*left: -6px;*/
    margin-left: 10px;
    margin-right: 10px;
}

.iconback {
    color: black;
    font-size: 30px;
    font-family: iconfont2;
}
.indicator-text {
    color: #888888;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
}
</style>
